<template>
  <ProDataG2plot :config="chartConfig">
    <template slot="header" slot-scope="config"><span>{{ config._title }}</span></template>
     <template slot="search" slot-scope="config">
      <div style="width: 700px" :key="config._name">
        <el-form :model="form" v-if="config._name">
          <pro-layout-contaner :columnCount="2">
            <pro-input
              v-model="form.test"
              uiType="date"
              label="input"
              labelWidth="60px"
            />
          </pro-layout-contaner>
          <pro-action @handler="handleSearch(config)">查询</pro-action>
        </el-form>
      </div>
    </template>

     <!-- 扩展操作 -->
    <template slot="action" slot-scope="config">
      <div :key="config._name">
        <pro-sub-action helpText="操作?" @handler="() => {}"
          >{{ config._title }}-操作</pro-sub-action
        >
        <pro-sub-action helpText="操作?" @handler="() => {}"
          >{{ config._title }}-操作2</pro-sub-action
        >
      </div>
    </template>
    <!-- 描述 -->
    <template  slot="describe" slot-scope="config">
      <div>
        <span style="color: red;font-weight: 700">描述：</span>{{ config.describe }}
      </div>
    </template>
    <!-- tooltip -->
    <template slot="tooltip" slot-scope="{config, tooltipData}">
      <div v-if="config._title">
        <div class="g2-tooltip-title">{{ tooltipData[0] || "" }}</div>
        <ul class="g2-tooltip-list">
          <li v-for="(item, index) in tooltipData[1]" :key="index">
            <span
              class="g2-tooltip-marker"
              :style="{ background: item.color }"
            ></span>
            <span class="g2-tooltip-name">{{ item.name }}</span
            >:
            <span class="g2-tooltip-value">{{ item.value }}</span>
          </li>
        </ul>
        <div style="text-align: center; padding: 10px">扩展内容</div>
      </div>
    </template>


  </ProDataG2plot>
</template>

<script>
import ProDataG2plot from "mars-pro/packages/pro-data-g2plot";
import ProLayoutContaner from 'mars-pro/packages/pro-layout-contaner';
import ProInput from 'mars-pro/packages/pro-input';
import ProSubAction from 'mars-pro/packages/pro-sub-action';

import chartConfig from "./chart";
import {
  getData1,
  getData2,
  getData3,
  getData4,
  getData5,
  getData6,
  getData7,
  getData8,
  getData9,
  getData10,
  getData11,
  getData12,
  getData13,
  getData14,
  getData15,
  getData16,
  getData17,
  getData18,
  getData19,
  getData20,
  getData21
} from "./_mock";
import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
import { post } from "mars-pro/src/pro/request";
const dataMockApi = {
  // 行业相关数据
  getData1: getData3,
  getData2: getData4,
  //行业经营数据
  getData3: getData5,
  getData4: getData5,
  getData5: getData5,
  //盈利能力
  getData6: getData6,
  getData7: getData10,
  getData8: getData11,
  getData9: getData12,
  getData10: getData13,
  getData11: getData13,
  getData12: getData13,
  getData13: getData13,
  getData14: getData16,
  getData15: getData17,
  getData16: getData18,
  getData17: getData19,
  getData18: getData20,
};

export default {
  components: { ProDataG2plot,ProLayoutContaner, ProInput, ProSubAction },
  mixins: Array.from({ length: 21 }).map(function (k, index) {
    return dataSource(
      "data" + (index + 1),
      post("/mock/data").mockData(dataMockApi["getData" + (index + 1)]),
      {
        dataField: "list",
        freeze: true,
      }
    );
  }),

  data() {
    return {
      form: { test: null },
      chartConfig,
    };
  },
  methods: {
    //按照年度分组数据 用于渲染平均标线
    resolveGroupData(datas) {
      const group = {};
      datas.forEach((item) => {
        const year = item.label.split("-")[0];
        if (!group[year]) {
          group[year] = {
            total: 0,
            data: [],
            per: 0,
            start: item.label,
            end: "",
          };
        }
        group[year].data.push(item);
        group[year].total = group[year].total + item.value;
        group[year].per = group[year].total / group[year].data.length;
        group[year].end = item.label;
      });
      return group;
    },
  },
  watch: Array.from({ length: 18 }).reduce(function (m, k, index) {
    m["data" + (index + 1) + ".store.datas"] = function () {
      if (index === 0) {
        //计算平均标线
        const annotationsDatas = this.resolveGroupData(
          this["data" + (index + 1)].formatDatas
        );
        const annotations = [];
        Object.keys(annotationsDatas).forEach((key, index) => {
          const len = annotationsDatas[key].data.length;
          // 均值标线-text
          annotations.push({
            id: "per-line-text-" + index,
            type: "text",
            content: `均值: ${Number(annotationsDatas[key].per).toFixed(
              2
            )}万㎡`,
            position: [
              annotationsDatas[key].data[0].label,
              annotationsDatas[key].per,
            ],
            offsetX: -10,
            offsetY: -10,
            style: {
              textBaseline: "bottom",
            },
          });
          // 均值标线-line
          annotations.push({
            id: "per-line-" + index,
            type: "line",
            start: [
              annotationsDatas[key].data[0].label,
              annotationsDatas[key].per,
            ],
            end: [
              annotationsDatas[key].data[len - 1].label,
              annotationsDatas[key].per,
            ],
            style: {
              stroke: "rgba(255,32,45,1)",
              lineWidth: 2,
            },
          });
        });

        //更新图表配置
        this.chartConfig.regions[0].option.geometryOptions[0].annotations =
          annotations;
        this.chartConfig.regions[0].option = {
          ...this.chartConfig.regions[0].option,
          data: [
            this["data" + (index + 1)].formatDatas,
            this["data" + (index + 1)].formatDatas,
          ],
        };
        return;
      }

      if (Array.isArray(this.chartConfig.regions[index].option)) {
        this.chartConfig.regions[index].option[0].data =
          this["data" + (index + 1)].formatDatas;
      } else {
         this.chartConfig.regions[index].option.data =
        this["data" + (index + 1)].formatDatas;
      }
     
    };
    return m;
  }, {}),
  mounted() {
    //加载数据
    const that = this;
    Array.from({ length: 21 }).forEach(function (k, index) {
      that["data" + (index + 1)].loadDatas();
    });
  },
};
</script>

<style>
</style>